<template>
  <div class="auth-container user-center-hero">
    <el-card class="auth-card user-card">
      <template #header>
        <div class="card-header">
          <h2>个人中心</h2>
          <p class="subtitle">您的账户信息已持久化 · 只在登录或注册后更新</p>
        </div>
      </template>

      <div class="user-details">
        <div class="detail-item">
          <span class="label">用户名</span>
          <span class="value">{{ userInfo.name }}</span>
        </div>
        <div class="detail-item">
          <span class="label">显示昵称</span>
          <span class="value">{{ userInfo.displayName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">邮箱</span>
          <span class="value">{{ userInfo.email }}</span>
        </div>
        <div class="detail-item">
          <span class="label">注册时间</span>
          <span class="value">{{ userInfo.registerDate }}</span>
        </div>
      </div>

      <div class="admin-entry" v-if="isAdmin">
        <el-button type="primary" @click="goAdmin">进入管理员后台</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 简单的个人中心数据
import { useUserStore } from '@/stores/auth/user'
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const { user } = storeToRefs(userStore)
const router = useRouter()

const userInfo = computed(() => ({
  name: user.value.username || '—',
  displayName: user.value.display_name || '—',
  email: user.value.email || '—',
  registerDate: user.value.created_at
    ? new Date(user.value.created_at).toLocaleString()
    : '—'
}))

// 仅管理员显示按钮（后端若返回 role 字段则使用；否则始终隐藏）
const isAdmin = computed(() => user.value.role === 'ADMIN')

function goAdmin() {
  router.push({ path: '/admin-dashboard' })
}


</script>

<style scoped>
.user-center-hero {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
.user-card {
  width: 100%;
  max-width: 520px;
}
.card-header h2 {
  margin: 0;
  font-size: 24px;
  color: #5a3e2b;
  font-weight: 600;
}
.subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #8a6f5b;
}
.user-details {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-radius: 10px;
  background: #fffaf6;
  box-shadow: inset 0 0 0 1px rgba(90, 62, 43, 0.08);
}
.label {
  color: #6b4f3a;
  font-weight: 500;
}
.value {
  color: #3d2b20;
  font-weight: 600;
}
.admin-entry {
  margin-top: 24px;
  text-align: center;
}
.auth-card {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}
</style>